 <!-- 
 @Author: LW
 @Date: 2020-12-10 09:39:51   
 @function:文件上传
----------------------------------------------------------  
 @Last Modified by: 
 @Modified function:
 -->
<template>
  <div class="page">
    <div id="filePicker">选择文件</div>
    <div class="file-panel">
      <!-- <h3>上传情况</h3> -->
      <div class="file-list">
        <ul
          class="file-item"
          :class="`file-${file.id}`"
          v-for="file in fileList"
          :key="file.id"
        >
          <li class="file-type" :icon="fileCategory(file.ext)"></li>
          <li class="file-name">{{ file.name }}</li>
          <li class="file-size">{{ fileSize(file.size) }}</li>
          <li class="file-status">上传中...</li>
          <li class="file-operate">
            <a title="开始" @click="resume(file)"
              ><i class="iconfont icon-control-play">+</i></a
            >
            <a title="暂停" @click="stop(file)"
              ><i class="iconfont icon-video-pause">||</i></a
            >
            <a title="移除" @click="remove(file)"
              ><i class="iconfont icon-close-big">-</i></a
            >
          </li>
          <li class="progress"></li>
        </ul>
        <div class="no-file" v-if="!fileList.length">
          <i class="iconfont icon-empty-file"></i>暂无待上传文件
        </div>
      </div>
    </div>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="small" type="primary" :loading="loading" @click="sure()"
        >确定</el-button
      >
    </div>
    <VueUpload
      ref="uploader"
      uploadButton="#filePicker"
      multiple
      @fileChange="fileChange"
      @progress="onProgress"
      @success="onSuccess"
      v-bind:uploadInfo="mediaInfo"
    ></VueUpload>
  </div>
</template>

<script>
import $ from "jquery";
import WebUploader from "webuploader";
import VueUpload from "./upload"; //文件上传
import CommonHttp from "@/api/common/index";//
const { mergeFiles } = CommonHttp;
export default {
  props: ["uploadInfo"], //父界面v-bind:editInfo一致
  components: { VueUpload },
  data() {
    return {
      loading: false,
      mediaInfo: {
        servicePath: this.uploadInfo.servicePath,
        folderPath: this.uploadInfo.folderPath,
        fileType: null, //文件类型
        file: null,
        fileNumLimit: 100,
      },
      fileList: [],
      mediaList: [], //上传成功以后，返回的信息
    };
  },
  watch: {},
  mounted() {
    this.mediaInfo.file = null;
  },
  computed: {
    uploader() {
      return this.$refs.uploader;
    },
  },
  methods: {
    fileChange(file) {
      if (!file.size) return;
      this.fileList.push(file);
    },
    onProgress(file, percent) {
      $(`.file-${file.id} .progress`).css("width", percent * 100 + "%");
      $(`.file-${file.id} .file-status`).html((percent * 100).toFixed(2) + "%");
    },
    onSuccess(file, response) {
      console.log("上传成功", response);
      let self = this;
      var type = file.name.split(".");
      let par = {
        servicePath: this.mediaInfo.servicePath,
        folderPath: this.mediaInfo.folderPath,
        temp_path: file.source.ruid,
        media_type: "file",
        media_sub_type: type[type.length - 1],
      };
      mergeFiles(par).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          $(`.file-${file.id} .file-status`).html("上传成功");
          //文件信息
          data.Data.name = file.name;
          var filenew = {
            name: data.Data.name,
            url: data.Data.path,
            size: data.Data.size.toFixed(0),
            type: data.Data.media_sub_type,
            sort: self.mediaList.length + 1,
          };
          self.mediaList.push(filenew);
        }
      });
    },
    //确定
    sure() {
      this.$emit("callBack", this.mediaList);
    },
    onComplete(file, response) {},
    //（中断后）重新开始，
    resume(file) {
      this.uploader.upload(file);
    },
    //停止上传
    stop(file) {
      this.uploader.stop(file);
    },
    //删除文件
    remove(file) {
      //取消并中断文件上传
      this.uploader.cancelFile(file);
      //在队列中移除文件
      this.uploader.removeFile(file, true);

      //在ui上移除
      let index = this.fileList.findIndex((ele) => ele.id === file.id);
      this.fileList.splice(index, 1);
      //在mediaList中移除
      let mediaIndex = this.mediaList.findIndex((ele) => ele.id === file.id);
      this.mediaList.splice(mediaIndex, 1);
    },
    //文件大小
    fileSize(size) {
      return WebUploader.Base.formatSize(size);
    },
    //文件分类
    fileCategory(ext) {
      let type = "";
      const typeMap = {
        image: ["gif", "jpg", "jpeg", "png", "bmp", "webp"],
        video: ["mp4", "m3u8", "rmvb", "avi", "swf", "3gp", "mkv", "flv"],
        text: [
          "doc",
          "txt",
          "docx",
          "pages",
          "epub",
          "pdf",
          "numbers",
          "csv",
          "xls",
          "xlsx",
          "keynote",
          "ppt",
          "pptx",
        ],
      };
      Object.keys(typeMap).forEach((_type) => {
        const extensions = typeMap[_type];
        if (extensions.indexOf(ext) > -1) {
          type = _type;
        }
      });
      return type;
    },
  },
};
</script>

<style lang="scss">
$h-row: 50px;

.file-panel {
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);

  > h2 {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
  }

  .file-list {
    position: relative;
    height: 200px;
    overflow-y: auto;
    background-color: rgb(250, 250, 250);
  }

  .file-item {
    position: relative;
    height: $h-row;
    line-height: $h-row;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;

    > li {
      display: inline-block;
    }
  }
  .file-type {
    width: 24px;
    height: 24px;
    vertical-align: -5px;
  }
  .file-name {
    width: 60%;
    margin-left: 10px;
  }
  .file-size {
    width: 10%;
  }
  .file-status {
    width: 10%;
  }
  .file-operate {
    width: 10%;
    > a {
      padding: 10px 5px;
      cursor: pointer;
      color: #666;

      &:hover {
        color: #ff4081;
      }
    }
  }
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: $h-row - 1;
    width: 0;
    background-color: #e2edfe;
    z-index: -1;
  }

  .no-file {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
  }
}
</style>
